// import React, { Component } from 'react'
import React, { PureComponent } from 'react'

const noop = () => {}
// export default class TodoItem extends Component {
export default class TodoItem extends PureComponent {
    handleCheckBoxChnage = () => {
        // 加个判断或默认一个空函数  
        // this.props.onCompletedChnage && this.props.onCompletedChnage(this.props.id)
        const {
            // onCompletedChange = () => {},
            onCompletedChange = noop,
            id
        } = this.props
        onCompletedChange(id)
    }
    // shouldComponentUpdate(nextProps, nextState) {                     // 使用PureComponent就不需要这个生命周期了
    //     return nextProps.isCompleted !== this.props.isCompleted
    // }
    render() {
        return (
            <li>
                <input 
                    type="checkbox" 
                    checked={this.props.isCompleted}
                    onChange={this.handleCheckBoxChnage}
                />
                <span>{this.props.title}</span>
                <button>{this.props.isCompleted?'已完成':'未完成'}</button>
            </li>
        )
    }
}
